import { useState} from "react";
import Taro,{useDidShow} from '@tarojs/taro';
import { Input } from '@tarojs/components';
import {getGlobalData} from '../../util';
import Styles from './index.module.less';
import {Request} from '../../util';
import { Style } from "@tarojs/runtime";

export default function index(props){

    const {style} = props;
    const [trueName,setTrueName] = useState("");
    const domain = getGlobalData("domain");
    const [phone, setPhone] = useState("");
    const [authCode, setAuthCode] = useState("");
    const [availableSendStatus, setAvailableSendStatus] = useState(true);
    const [count, setCount] = useState(60);

    const openid = Taro.getStorageSync("openid");

    const handleTrueNameInput = (e) => {
        let trueName = e.detail.value;
        setTrueName(trueName);
        Taro.setStorageSync("trueName",trueName);
        Request(domain+"/client/user/updateTrueName",{trueName:trueName, openid:openid});
    }

    const handlePhoneInput = (e) => {
        let phone = e.detail.value;
        if(phone.length <= 11){
            Request(domain+"/client/user/updatePhone",{phone:phone,openid:openid});
        }
        setPhone(phone);
        Taro.setStorageSync("phone",phone);
    }

    const getUserInfo = () => {
        Request(domain+"/client/user/userInfo",{openid:Taro.getStorageSync('openid')}).then((res)=>{
            let userInfo = res.data.data;
            setTrueName(userInfo.true_name);
            setPhone(userInfo.phone);
            Taro.setStorageSync("trueName",userInfo.true_name);
            Taro.setStorageSync("phone",userInfo.phone);
        });
    }

    const sendAuthCode = () => {
        //校验手机号码格式是否正确
        var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if( !phoneReg.test(phone) ){
            Taro.showModal({
                title: '提示',
                content:"请输入正确的手机号码",
                showCancel:false
            })
        }else{
            setAvailableSendStatus(false);

            //请求接口发送验证码
            Request(domain+"/client/auth/sendCode",{phone:Taro.getStorageSync('phone')})

            setTimeout(() => {
                setAvailableSendStatus(true);
                clearInterval(s);
                setCount(60);
            }, 60000);

            var s = setInterval(()=>{
                    setCount(c =>{
                        return c-1;
                    });
            },1000)
            
        }
    }

    useDidShow(()=>{
        getUserInfo();
        setAuthCode("");
        Taro.removeStorageSync("authCode");
    },[])

    const handleAuthCodeInput = (e) => {
        setAuthCode(e.detail.value);
        Taro.setStorageSync("authCode",e.detail.value);
    }

    return (
        <view style={style} className={Styles.profile}>
             <view class={Styles.header}>预订人</view>
             <view class={Styles.truename}>
                <view>姓名</view>
                <Input type="text" class={Styles.input} value={trueName} onInput={handleTrueNameInput}/>
             </view>
             <view class={Styles.phone}>
                <view>手机号</view>
                <Input type="number" class={Styles.input} value={phone} onInput={handlePhoneInput}/>
            </view>
            <view class={Styles.auth_code}>
                <view>验证码</view>
                <Input type="number" class={Styles.input} placeholderClass={Styles.placeholder}  value={authCode} onInput={handleAuthCodeInput}/>
                { availableSendStatus &&
                    <view class={Styles.send_code_btn}  onClick={()=>{
                        sendAuthCode()
                    }}>获取验证码</view>
                }

                { !availableSendStatus &&
                    <view class={Styles.unsend_code_btn}>
                        {count}秒重获验证码
                    </view>
                }
            </view>
        </view>
    );
}